<template>
<<<<<<< HEAD
   <div>
    
       <van-cell-group>
        <myheader/>
      <van-form @submit="onSubmit">
        <van-field
          v-model="form.username"
          :rules="[
              { required: true, message: '请输入用户名！' },
              { pattern: /^[0-9a-zA-Z]{6,}$/, message: '用户名由数字和英文6位起！'}
            ]"
          type="tel"
          label="用户名"
          placeholder="请输入用户名"
          clearable
        />

        <van-field
          v-model="form.password"
          :rules="[
              { required: true, message: '请输入密码！' },
              { pattern: /^[0-9a-zA-Z_]{8,}$/, message: '密码由下划线/数字和英文8位起不能出现特殊字符！'}
            ]"
          type="password"
            
          placeholder="请输入密码"
          clearable
        />

        <van-field
          v-model="form.password1"
          :rules="[
              { required: true, message: '请确认密码！' }
            ]"
          type="password"
          label="请确认密码"
          placeholder="请确认密码"
          clearable
        />
        
        <van-field
          v-model="form.phone"
          :rules="[
              { required: true, message: '请输入手机号!' },
              { pattern: /^[0-9]{11}$/, message: '手机号由11位数字组成'}
            ]"
          type="tel"
          label="手机号"
          placeholder="请输入手机号"
          clearable
        />

        <van-field
          v-model="form.num"
          :rules="[
              { required: true, message: '请输入积分!' },
              { pattern: /^[0-9]{1,7}$/, message: '积分由数字组成,最多7位数字'}
            ]"
          type="tel"
          label="积分"
          placeholder="请输入积分"
          clearable
        />

        <!-- //滑块 -->
        <drag-verify  :width='400'
                      :height='50'
                      text='请将滑块拖到最右侧'
                      ref='Verify'
                      >

        </drag-verify>


          <van-button type="submit" color='red'>提交</van-button>
      </van-form>
    <myfoot></myfoot>
    </van-cell-group>
   </div>
</template>

<script>



//导入滑块组件
import dragVerify from 'vue-drag-verify';
import Myheader from './myheader.vue';
import Myfoot from './myfoot.vue';

export default {
   data () {
      return {
          form:{}
      };
   }, 
  // 声明方法
   methods: {
       //提交and对比密码
    onSubmit: function () {
      if (this.form.password != this.form.password1) {
        this.$toast.fail('两次密码不一致')
        return false
      }
      //滑块验证
      if(this.$refs.Verify.isPassing == false){
        this.$toast.fail('请将滑块拖到最右侧')
        return false
      }
      else{
        this.axios.post(this.localhost+'register/',this.qs.stringify(this.form))
        .then(res=>{
            console.log(res);
            if(res.data.code == 200){
              this.$toast.success(res.data.meg);
              this.$router.push('/login_1')
            }
            else{
              this.$toast.fail(res.data.meg)
              return false
            }
        })
      }
    },
   },

   computed: {},
    //声明组件
   components: {
     'dragVerify': dragVerify,
      'Myheader':Myheader,
      Myfoot
   }
}
</script>
<style lang='css' scoped>
=======
<div>


	<myheader />

	<h1>用户注册</h1>


<van-cell-group>
	
	<van-field label="用户名" placeholder="请输入用户名" v-model="username"   />


	<van-field label="密码" placeholder="请输入密码" v-model="password"  type="password"  />

	<van-field label="确认密码" placeholder="请再次输入密码" v-model="password1" type="password"   />


	<drag-verify

		:width="400"
		:height="50"
		text="请将滑块拖动到最右侧"
		ref="Verify"

	>
		


	</drag-verify>


	<van-button @click="reg" color="green"> 点击注册 </van-button>


</van-cell-group>



</div>
</template>


<script>


//导入其他组件
import myheader from './myheader.vue';

//导入滑块组件
import dragVerify from 'vue-drag-verify';


export default{

	//声明组件
	components:{

		'myheader':myheader,
		'dragVerify':dragVerify

	},
	//声明变量
	data(){

		return {

			msg:'这是一个字符串',
			username:"",
			password:"",
			password1:""

		}


	},
	//声明方法
	methods:{

		//注册方法
		reg:function(){

			if(this.username == ""){

				this.$toast.fail("您的用户名为空");
				return false;
			}

			//判断滑块
			console.log(this.$refs.Verify.isPassing);

			//发送请求
			this.axios.post(
				'http://localhost:5000/register/',
				this.qs.stringify({username:this.username,password:this.password})).then((result) =>{

					console.log(result);

					if(result.data.code==200){

						this.$toast.success('注册成功');
					}else{
						this.$toast.fail(result.data.msg);
					}

			});




		}

		


	}


}
	


</script>


<style>

.on { background:purple }
.off {background:orange }
>>>>>>> afcc523b004321adbe11ac83d9b5087146701336

</style>